@import "baseScss";


.container {
  padding-bottom: 100rem / $baseFont;
  min-height: 100%;
  background-color: #f6f6f6;
  // banner
  header.banner {
    position: relative;
    margin: 0 auto;
    width: 750rem / $baseFont;
    height: 563rem / $baseFont;
    img {
      width: 100%;
      height: 100%;
    }
    ul.points {
      position: absolute;
      left: 50%;
      bottom: 19rem / $baseFont;
      transform: translate(-50%);
      >li {
        float: left;
        margin: 0 (6rem / $baseFont);
        width: 15rem / $baseFont;
        height: 15rem / $baseFont;
        background-color: #fff;
        border-radius: 7.5rem / $baseFont;
        &.active {
          width: 28rem / $baseFont;
          background-color: #dfb9b5;
        }
      }
    }
  }
  // info
  .info {
    margin: 0 auto;
    padding: 0 (20rem / $baseFont);
    width: 710rem / $baseFont;
    height: 500rem / $baseFont;
    background-color: #fff;
    overflow: hidden;
    .title {
      margin-top: 40rem / $baseFont;
      font-size: 33rem / $baseFont;
      color: #171a1f;
      font-weight: bold;
    }
    .tag {
      margin-top: 26rem / $baseFont;
      margin-bottom: 33rem / $baseFont;
      >span {
        display: inline-block;
        padding: (9rem / $baseFont) (15rem / $baseFont);
        margin-right: 9rem / $baseFont;
        font-size: 21rem / $baseFont;
        color: $baseColor;
        background-color: #f2ebe6;
        border-radius: 5rem / $baseFont;
      }
    }
    .desc {
      >p {
        line-height: 48rem / $baseFont;
        font-size: 24rem / $baseFont;
        color: #666;
      }
    }
  }
  // attr
  .attr {
    margin: (16rem / $baseFont) auto 0;
    padding: (44rem / $baseFont) (20rem / $baseFont);
    width: 710rem / $baseFont;
    height: 263rem / $baseFont;
    background-color: #fff;
    .attr-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28rem / $baseFont;
      width: 449rem / $baseFont;
      height: 62rem / $baseFont;
      >p {
        font-size: 27rem / $baseFont;
        color: #555;
      }
      >span {
        width: 159rem / $baseFont;
        height: 62rem / $baseFont;
        line-height: 62rem / $baseFont;
        text-align: center;
        border: (1rem / $baseFont) solid $baseColor;
        border-radius: 31rem / $baseFont;
        font-size: 27rem / $baseFont;
        color: $baseColor;
        &.active {
          background-color: $baseColor;
          color: #fff;
        }
      }
    }
  }
  // prop
  .prop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 (20rem / $baseFont);
    width: 710rem / $baseFont;
    height: 153rem / $baseFont;
    // background-color: skyblue;
    .prop-l {
      .price {
        font-size: 33rem / $baseFont;
        color: $baseColor;
        margin-bottom: 21rem / $baseFont;
      }
      .desc {
        font-size: 21rem / $baseFont;
        color: #666;
      }
    }
    .prop-r {
      display: flex;
      align-items: center;
      img {
        width: 47rem / $baseFont;
        height: 47rem / $baseFont;
      }
      span {
        margin: 0 (18rem / $baseFont);
        font-size: 25rem / $baseFont;
        color: #333;
      }
    }
  }
  // bottom
  footer.bottom {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    margin: 0 auto;
    width: 750rem / $baseFont;
    height: 100rem / $baseFont;
    span {
      display: inline-block;
      width: 50%;
      height: 100rem / $baseFont;
      line-height: 100rem / $baseFont;
      text-align: center;
      font-size: 33rem / $baseFont;
      color: #fff;
      &.add {
        background-color: #474764;
      }
      &.buy {
        background-color: #bc8281;
      }
    }
  }
}
